<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        width: 375px;
        height: 676px;
        border: 1px solid #000;
        overflow: auto;
      }
    </style>
  </head>
  <!-- 使用浏览器自带的Websocket,实现聊天室的前端部分 -->
  <body>
    <div id="app">
      <div id="box"></div>
      <input type="text" />
      <button>发送</button>
    </div>

    <script>
      const name = prompt("请输入昵称");
      const id = new Date().getTime();

      const box = document.getElementById("box");
      const input = document.querySelector("input");
      const btn = document.querySelector("button");

      // 创建链接
      var ws = new WebSocket("ws://10.31.167.39:8080");

      // 连接成功的回调
      ws.onopen = function (evt) {
        console.log("Connection open ...");
        // 前端给后端发送消息
        // ws.send("Hello WebSockets!");
      };

      // 接收到服务端的信息
      ws.onmessage = function (evt) {
        // console.log("Received Message: " + evt.data);
        // 主动断开连接
        // ws.close();

        const { id2, name, msg } = JSON.parse(evt.data);

        if (id2 === id) {
          box.innerHTML += `<p style="text-align:right">${name}说:${msg}</p>`;
        } else {
          box.innerHTML += `<p>${name}说:${msg}</p>`;
        }
      };

      // 监听连接关闭的回调
      ws.onclose = function (evt) {
        console.log("Connection closed.");
      };

      btn.onclick = function () {
        // console.log(input.value);
        // ws.send(name + "说:" + input.value);

        // websocket发送的数据必须是字符串
        ws.send(
          JSON.stringify({
            name,
            id2: id,
            msg: input.value,
          })
        );
        input.value = "";
      };

      // 心跳连接
      setInterval(() => {
        ws.send("ping");
      }, 30000);
    </script>
  </body>
</html>
